<template>
  <view class="read-item">
    <view class="read-top flex">
      <image class="read-img" :src="data?.bookImg" mode="aspectFill" />

      <view class="read-right flex-1">
        <text class="title">
          {{ data?.bookName }}
        </text>
        <view class="tag-group">
          <text v-for="(item, index) in data?.bookCategory" :key="item" class="tag" :class="`tag-${index + 1}`">
            {{ item }}
          </text>
        </view>
        <!-- <view class="progress-box flex items-center">
          <up-line-progress :percentage="data?.progress" height="8" :show-text="false" inactive-color="#EDECEC" />
          <view class="progress-info">
            {{ `${data?.progress}%` }}
          </view>
        </view> -->
      </view>
    </view>

    <view v-if="Number(data?.status)" class="btn-group flex">
      <!-- <view class="flex">
        <view class="btn flex items-center justify-center" :class="Number(data?.status) === 0 && 'btn-gray'" @click="toPreview">
          <text class="btn-text">
            读前预告
          </text>
        </view>

        <view class="btn flex items-center justify-center" @click="toExercise">
          <text class="btn-text">
            读后测验
          </text>
        </view>
      </view> -->

      <view class="btn-default flex items-center justify-center" @click="toExercise">
        <!-- <text class="btn-text">
          周中伴读
        </text> -->
        <text class="btn-text">
          读后自测
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts" name="ReadItem">
// import { useInfoStore } from '@/store';

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

// const infoStore = useInfoStore();

// const toAnswer = () => {
//   uni.navigateTo({
//     url: `/pages/views/game/index?bookIsbn=${props.data.bookIsbn}&bookName=${props.data.bookName}&schoolId=${props.data.schoolId}&classId=${props.data.classId}&classCourseId=${props.data.id}`,
//   });
// };

const toExercise = () => {
  uni.navigateTo({
    url: `/pages/views/answer/index?bookIsbn=${props.data.bookIsbn}&bookId=${props.data.bookId}&bookName=${props.data.bookName}&schoolId=${props.data.schoolId}&classId=${props.data.classId}&classCourseId=${props.data.id}&coursePkg=${props.data.coursePkg}`,
  });
};

// const toPreview = () => {
//   if (Number(props.data.status) === 0)
//     return;
//   uni.navigateTo({
//     url: `/pages/views/preview/index?bookIsbn=${props.data.bookIsbn}&bookName=${props.data.bookName}&schoolId=${props.data.schoolId}&classId=${props.data.classId}&classCourseId=${props.data.id}`,
//   });
// };
</script>

<style lang="scss" scoped>
.read-item {
  width: 100%;
  min-height: 226rpx;
  padding: 22rpx 32rpx;
  background: #fff;
  border-radius: 20rpx;

  .read-top {
    position: relative;
    align-items: center;
  }

  .read-img {
    position: absolute;
    top: -58rpx;
    left: 0;
    width: 160rpx;
    height: 230rpx;
    border-radius: 12rpx;
  }

  .read-right {
    padding: 0 0 5rpx 176rpx;

    .title {
      font-size: 32rpx;
      line-height: 48rpx;
      font-weight: bold;
      color: #333;
    }

    .tag-group {
      padding: 16rpx 0;

      .tag {
        padding: 0 8rpx;
        font-size: 24rpx;
        line-height: 42rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
      }

      .tag-1 {
        background: rgba(152, 237, 209, 0.3);
        color: #00BF7F;
      }

      .tag-2 {
        background: #EBF1FF;
        color: #7292CF;
      }

      .tag-3 {
        background: #F5F6F9;
        color: #888888;
      }
    }

    .progress-box {
      padding-bottom: 22rpx;

      .progress-info {
        font-size: 20rpx;
        line-height: 28rpx;
        padding-left: 24rpx;
        color: #888888;
      }
    }
  }

  .btn-group {
    /* padding-top: 40rpx; */
    justify-content: flex-end;

    .btn-default {
      padding: 0 32rpx;
      height: 56rpx;
      background: #37CC67;
      border-radius: 28rpx;
      color: #fff;

      .btn-text {
        padding-right: 8rpx;
        font-size: 28rpx;
      }
    }

    .btn {
      padding: 0 32rpx;
      margin-right: 8rpx;
      height: 56rpx;
      border-radius: 28rpx;
      border: 2rpx solid #37CC67;
      color: #37CC67;

      .btn-text {
        padding-right: 8rpx;
        font-size: 28rpx;
      }
    }
  }
}
</style>
